<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>公告管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .icon-cray {color:#ffb800!important;}
        .icon-blue {color:#1e9fff!important;}
        .icon-tip {color:#ff5722!important;}
        .layuimini-qiuck-module {text-align:center;margin-top: 10px}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .welcome-module {width:100%;height:210px;}
        .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .layui-bg-number {background-color:#F8F8F8;}
        .layuimini-notice:hover {background:#f6f6f6;}
        .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
        .layuimini-notice-title,.layuimini-notice-label {
            padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
        .layuimini-notice-title {line-height:28px;font-size:14px;}
        .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
        /*搜索框样式调整*/
        .layui-form-item {
            margin-bottom: 0px;
        }
    </style>
</head>
<body>
<div class="layuimini-container"  style="height: 700px">
    <div class="layuimini-main">
        <!-- 搜索条件 -->
        <fieldset class="layui-elem-field">
            <legend>筛选条件</legend>
            <div class="layui-field-box">
                <div class="layui-form-item layui-form-pane">   <!--  每一个这样的div代表一个面板状态 每一个面板会自动换行 -->
                    <label class="layui-form-label">公告标题</label>
                    <div class="layui-input-inline">
                        <input type="text" id="search_noticeTitle" class="layui-input">
                    </div>
                    <label class="layui-form-label">公告状态</label>
                    <div class="layui-input-inline">
                        <select id="search_ifCancel" class="layui-input">
                            <option value="">全部</option>
                            <option value="0">已发布</option>
                            <option value="1">已撤回</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                        <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                    </div>
                </div>

            </div>
        </fieldset>

        <div>
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container" style="left: 100px">
                <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
            </div>
        </script>
        <script type="text/html" id="barDemo">
<!--            <a class="layui-btn layui-btn-xs" lay-event="edit" id="updateBtn">编辑</a>-->
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" id="cancelBtn">撤回</a>
        </script>

    </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../js/userAuth.js"></script>
<script>
    $(function () {
        $("#iReset").click(function () {      // 重置
            $("#search_noticeTitle").val("");    // 设置value值
            $("#search_ifCancel").val("");
            search();
        });

        $("#searchVal").click(function () {   // 搜索
            var search_noticeTitle = $("#search_noticeTitle").val();   // 获取value值
            var search_ifCancel = $("#search_ifCancel").val();   // 获取value值
            search(search_noticeTitle,search_ifCancel);
        });

        search();
        function search(noticeTitle,ifCancel) {   // js中默认不认形参的
            layui.use(['form','table','tree'], function(){
                var table = layui.table;
                var form = layui.form;
                var json = {};
                if(noticeTitle != null && noticeTitle != "") {  // 如果搜索框中，用户传递了搜索值，则添加一个json条件数据
                    json.noticeTitle = noticeTitle;             // js中的动态属性添加
                    // 在json中添加一个key为staffName的值  {staffName: value}
                }
                if(ifCancel != null && ifCancel != "") {
                    json.ifCancel = ifCancel;
                }
                // table默认数据渲染和分页处理
                table.render({   // 渲染数据
                    elem: '#test'   // 获取table的id
                    ,url:'/notice/selectForPage'    // 获取json数据
                    ,where:json               // 添加的请求查询参数
                    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        title: '提示'
                        ,layEvent: 'LAYTABLE_TIPS'
                        ,icon: 'layui-icon-tips'
                    }]
                    ,title: '公告表'
                    ,cols: [[
                        // 每行中的列字段渲染   cols会根据返回的总条数进行循环处理   相当于我们java中的for循环  每次会把一条完整的json数据传递进来
                        {type: 'checkbox', fixed: 'left'}
                        ,{field:'noticeId', title:'编号',align:'center', width:80, fixed: 'left', unresize: true, sort: true, templet: function(res){
                                return '<em>'+ res.noticeId +'</em>'
                            }}
                        ,{field:'noticeTitle', title:'标题',align:'center', width:300, templet: function(res){
                                return '<em>'+ res.noticeTitle +'</em>'
                            }}
                        ,{field:'', title:'公告内容',align:'center',event:'viewContent', templet: function(){
                                return '<a id="noticeContent" style="color: #1aa094">'+ '查看详情' +'</a>'
                            }}
                        ,{field:'staff.staffName', title:'发布人',align:'center', width:200, templet: function(res){
                                return '<em>'+ res.staff.staffName +'</em>'
                            }}
                        ,{field:'createTime', title:'发布时间',align:'center',sort: true, width:250, templet: function(res){
                                return '<em>'+ res.createTime +'</em>'
                            }}
                        //,{field:'action', title:'账号状态', width:120, templet: '#switchTpl', unresize: true}
                        ,{ title:'流程状态',align:'center', width:120,  templet: function (res) {
                                if (res.ifCancel === 0) {
                                    return '<em style="color: #009f95">' + '已发布' + '</em>'
                                }else {
                                    //return '<button disabled class="layui-btn-disabled layui-btn-xs">' + '撤回' + '<button>'
                                    return '<em style="color: black">' + '已撤回' + '<em>'
                                }
                            }}
                        ,{fixed: 'right', title:'操作',align:'center', toolbar: '#barDemo', width:120}

                    ]]
                    ,height:'516px'
                    ,page: true
                });
                //头工具栏事件
                table.on('toolbar(test)', function(obj){
                    //获取选中行
                    var checkStatus = table.checkStatus(obj.config.id).data;
                    var ids = [];
                    for(var i=0;i<checkStatus.length;i++){
                        ids.push(checkStatus[i].noticeId)
                    }
                    ids = ids.join(',');//必须要写，不然后台获取不到数据

                    console.log(checkStatus);
                    switch(obj.event){
                        case 'insert_staff':
                            window.location.href = 'staff.html';
                            break;
                        case 'delete':
                            console.log("ids:  "+ids)
                            if (ids !== null && ids !== ''){
                                layer.confirm("确认删除选中数据？",function(index) {
                                    console.log("ids:"+ids)
                                    $.ajax({
                                        url:'/notice/deleteByIds',
                                        method:'post',
                                        datatype:"text",
                                        data:{ids:ids},
                                        success : function(response) {
                                            layer.msg(response.msg)
                                        },
                                        error : function(response) {
                                            layer.msg(response.msg)
                                        }
                                    })
                                    layer.close(index);
                                    setTimeout(function() {
                                        window.location.reload(); //刷新页面
                                    },800)
                                })
                            }else {
                                layer.msg("未选中数据！",{time :500})
                            }
                            break;
                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    };
                });
                //监听行工具事件
                table.on('tool(test)', function(obj){

                    var data = obj.data;
                    //console.log(obj)
                    if(obj.event === 'edit'){

                    } else if(obj.event === 'del'){
                        if (obj.data.ifCancel === 1) {
                            layer.msg('已撤回！无法再次撤回！')
                        }else{
                            layer.confirm('确认要撤回吗？', function(index){
                                $.ajax({   // 异步请求   想象成线程状态
                                    url:"/notice/updateById",   // 请求路径
                                    type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                    contentType:"application/json;charset=utf-8",
                                    datatype:"text",
                                    // request中传递的key-value值
                                    data:JSON.stringify({
                                        ifCancel:1,
                                        noticeId:obj.data.noticeId
                                    }),
                                    success:function(){                        // 后台服务响应成功，自动返回数据
                                        search();
                                        layer.msg('撤回成功！', {icon: 1});
                                    },
                                    error:function(){             // 网络请求失败，自动调用此方法
                                        layer.msg("网络服务失败，请稍后重试!");
                                    }
                                });
                                layer.close(index);
                            });
                        }
                    }
                    if (obj.event === "viewContent"){
                        var title = $(this).children('.layuimini-notice-title').text(),
                            noticeTime = $(this).children('.layuimini-notice-extra').text(),
                            content = $(this).children('.layuimini-notice-content').html();
                        var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;/*border-bottom:1px solid #0c0c0c;*/background-color: #ffffff;color: #131313">\n' +
                            '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + data.noticeTitle + '</h4></div>\n' +
                            '<div style="font-size: 18px">' + data.noticeContent + '</div>\n' +
                            '</div>\n';
                        parent.layer.open({
                            type: 1,
                            title:'<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + data.createTime + '</span>',
                            area: ['80%', '80%'],
                            shade: 0.8,
                            id: 'layuimini-notice',
                            btn: ['关闭'],
                            btnAlign: 'c',
                            moveType: 1,
                            content: html,
                            success: function (layero) {
                                var btn = layero.find('.layui-layer-btn');
                            }
                        });
                    }

                });

            });
        }
    });


    //JS
    layui.use(['element', 'layer', 'util','tree'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,title: '更多'
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                    ,scrollbar: false
                });
            }
        });
    });
</script>
</body>
</html>